
<template>
<el-card>
    <my-search v-model="formInline" @search="doSearch">
        <el-form-item slot="time">
            <el-input  v-model="formInline.rolename" placeholder="角色名称" clearable></el-input>
        </el-form-item>
        <el-form-item slot="title">
            <el-input  v-model="formInline.username" placeholder="用户名称" clearable></el-input>
        </el-form-item>
        <div slot="dr" class="title_btns">
            <el-button  size="small" type="success" icon="el-icon-plus" @click="newPeople">添加角色</el-button>
        </div>
    </my-search>

    <my-table :data="form.tableData" @sort="doSearch">
        <el-table-column prop="rolename" label="角色名称" sortable min-width="120"></el-table-column>
        <el-table-column prop="menunum" label="已分配菜单" min-width="120">
            <template slot-scope="scope">
                <el-popover placement="top" trigger="hover" @show="menuPopoverShow(scope.row)" :key="scope.row.roleid" :disabled="!scope.row.menunum || scope.row.menunum=='0'">
                    <template v-for="(item, index) in scope.row.menuList">
                        <template v-if="!item.leaf && index!=0 || (index>0 && scope.row.menuList[index-1].pid.length > item.pid.length)">
                            <br>
                        </template>
                            <el-tag size="mini" :type="!item.leaf && item.pid=='0' ? 'warning' : ''">{{item.leaf ? '' : '+'}}{{item.text}}</el-tag>
                    </template>
                    <el-button slot="reference" size="mini" :key="scope.row.roleid">{{!!scope.row.menunum ? scope.row.menunum : 0}}</el-button>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column prop="usernum" label="已分配人员" min-width="120">
            <template slot-scope="scope">
                <el-popover placement="top" trigger="hover" @show="peoplePopoverShow(scope.row)" :key="scope.row.roleid" :disabled="!scope.row.usernum || scope.row.usernum=='0'">
                    <template v-for="(value, key) in scope.row.peopleList">
                        <el-tag size="mini" type="warning">{{key}}</el-tag>
                        <el-tag size="mini" type="" v-for="(item, index) in value" :key="index">{{item.truename}}</el-tag>
                        <br>
                    </template>
                    <el-button slot="reference" size="mini" :key="scope.row.roleid">{{!!scope.row.usernum ? scope.row.usernum : 0}}</el-button>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column prop="addtime" label="添加时间" sortable min-width="150"></el-table-column>

        <el-table-column fixed="right" label="操作" width="400">
            <template slot-scope="scope">
                <my-btn type="edit" @click="toEditRow(scope.row)">编辑角色名</my-btn>
                <my-btn type="edit" @click="editMenu(scope.row)">分配权限</my-btn>
                <el-button type="text" size="mini" @click="editPeople(scope.row)" icon="el-icon-menu">分配人员</el-button>
                <my-btn type="del" @click="handleDel(scope.row)"></my-btn>
            </template>
        </el-table-column>
    </my-table>
    <my-pagination
        v-model="form.tableData"
        :action="$store.getters.sysUrl + '/role/list'"
        :search="pgQuery"
        ref="page"
        :after-query="afterQuery">
    </my-pagination>

    <!-- 添加/编辑人员 -->
    <my-dialog v-model="dialogAddVisible" :title="formTitle_add" width="500px">
        <add v-if="dialogAddVisible" :roleid="editRoleid" @close="dialogAddVisible = false"></add>
    </my-dialog>

    <!-- 分配菜单权限 -->
    <my-dialog v-model="dialogMenuVisible" title="分配权限" >
        <menu-list v-if="dialogMenuVisible" :roleid="editRoleid" @close="dialogMenuVisible = false"></menu-list>
    </my-dialog>
    
    <!-- 分配人员 -->
    <my-dialog v-model="dialogPeopleVisible" title="分配人员" >
        <sel-user
            v-if="dialogPeopleVisible"
            :roleid="editRoleid"
            type="User"
            @close="dialogPeopleVisible = false">
        </sel-user>
    </my-dialog>
</el-card>

</template>

<script>

import add from './add'
import menuList from './menu'
import selUser from '../user/form'
export default {
    components:{add , menuList , selUser},
    props: ['disabled'],
    data () {
            var checkTable = function (rule, value, callback) {
            $(value).each(function (index) {
                if (this.rolename == '') {
                    return callback(new Error('角色名称不能为空'));
                }
            })
            callback();
        }
        return{
             rules: {
                tableData: [
                    { validator: checkTable, trigger: 'blur' }
                ]
            },
            form:{
                tableData:[]
            },
            //搜索条件
            pgData: {
                sortname: '',
                sortorder: ''
            },

            formInline:{
                rolename: '',
                truename: '',
                username: ''
            },

            dialogPeopleVisible:false,
            dialogMenuVisible:false,
            dialogAddVisible: false,
            formUrl_prople: '',
            formUrl_menu: '',

            formTitle: '',
            formTitle_add: '',
            formTitle_people: '',
            formTitle_menu: '',

            editAllController:0,//全部编辑控制器

            //字典map
            mapMenu: [],
            mapPeople: {},
            editRoleid: '',
        }
    },
    computed:{
        pgQuery: function(){
            return {
                pagesize: 10,
                sortname: this.pgData.sortname ? this.pgData.sortname : 'addtime',
                sortorder: this.pgData.sortorder ? this.pgData.sortorder : 'desc',

                title: this.formInline.rolename,
                username: this.formInline.username
            }
        },
    },

    watch:{
        dialogPeopleVisible: function(n, o){
            !n && this.$refs.page.reload();
        },
        dialogAddVisible: function(n, o){
            !n && this.$refs.page.reload();
        },
        dialogMenuVisible: function(n, o){
            !n && this.$refs.page.reload();
        }
    },

    methods: {
        doSearch: function(){
            this.$refs.page.queryData();
        },
        //添加角色
        newPeople: function() {
            this.editRoleid = '';
            this.formTitle_add = '添加角色';
            this.dialogAddVisible = true;
        },
        //编辑人员
        toEditRow: function(row){
            this.editRoleid = row.roleid;
            this.formTitle_add = '编辑角色名';
            this.dialogAddVisible = true;
        },
        //删除人员
        handleDel: function (row) {
            this.$post(this.$store.getters.sysUrl + '/role/del', {rowguid: row.roleid}, function(){
                ShowMsg('删除成功', 'success');
                this.$refs.page.queryData();
            })
        },

        //分配权限
        editMenu:function(row){
            this.editRoleid = row.roleid;
            this.dialogMenuVisible = true;
        },

        editPeople:function(row){
            this.editRoleid = row.roleid;
            this.dialogPeopleVisible = true;
        },

        queryZd: function() {
            var that = this;
            this.$get(this.$store.getters.sysUrl + '/role/getmenutree', function(data){

                function deepMap(arr) {
                    arr.forEach(function(item) {
                        if(!!item.children) {
                            that.mapMenu.push(item);
                            deepMap(item.children);
                        }else{
                            var citem = clone(item);
                            citem.leaf = true;
                            that.mapMenu.push(citem);
                        }
                    })
                }

                deepMap(data);
            });
            this.$get(this.$store.getters.sysUrl+'/user/select', function(data){
                data.forEach(function(item){
                    that.mapPeople[item.userid] = item.truename;
                })
            });
        },

        afterQuery: function(data){
            data.forEach(function(item){
                item.menuList = [];
                item.peopleList = {};
            })
        },
        menuPopoverShow: function(row) {
            var that = this;
            this.$get(this.$store.getters.sysUrl + '/role/rolemenulist', {
                rowguid: row.roleid
            }, function(data){
                console.log(111,data);
                var resArr = [];
                var dataMap = [];
                data.forEach(function(item) {
                    dataMap.push(item.menuid);
                });

                that.mapMenu.forEach(function(row) {
                    dataMap.forEach(function(item) {
                        if(row.id == item && resArr.indexOf(row) == -1) {
                            resArr.push(row)
                        };
                        if(row.id == item.slice(0, 3) && resArr.indexOf(row) == -1){
                            resArr.push(row)
                        };
                    })
                })
                row.menuList = resArr;
                return resArr;
            })
        },
        peoplePopoverShow: function(row) {
            this.$get(this.$store.getters.sysUrl+'/role/roleusermap', {
                rowguid: row.roleid
            }, function(data){
                row.peopleList = data;
            })
        }
    },
    mounted() {
        this.queryZd();
    }
}
</script>

<style scoped lang="scss">


.title_btns{
    float: right;
}
</style>
